<template>
  <el-tabs v-model="activeTag">
    <el-tab-pane
      :label="L('UserDetails')"
      name="first"
    >
      <el-form
        ref="editForm"
        label-width="80px"
        :model="editEntity"
        :rules="fromRoles"
        :size="size"
      >
        <el-row>
          <el-col
            :span="6"
            style="text-align:center"
          >
            <el-image
              fit="contain"
              :src="avatar"
            />
          </el-col>
          <el-col :span="18">
            <el-form-item
              :label="L('UserName')"
              prop="userName"
            >
              <el-input
                v-model="editEntity.userName"
                :maxlength="32"
                :minlength="2"
                :disabled="editEntity.userName=='admin'"
              />
            </el-form-item>
            <el-form-item
              :label="L('Name')"
              prop="name"
            >
              <el-input
                v-model="editEntity.name"
                :maxlength="32"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item
          :label="L('Surname')"
          prop="surname"
        >
          <el-input
            v-model="editEntity.surname"
            :maxlength="1024"
          />
        </el-form-item>
        <el-form-item
          :label="L('EmailAddress')"
          prop="emailAddress"
        >
          <el-input
            v-model="editEntity.emailAddress"
            :maxlength="32"
          />
        </el-form-item>
        <el-form-item
          v-if="dialogAction == 'create'"
          :label="L('Password')"
          prop="password"
        >
          <el-input
            v-model="editEntity.password"
            type="password"
            :maxlength="32"
          />
        </el-form-item>
        <el-form-item
          v-if="dialogAction == 'create'"
          :label="L('ConfirmPassword')"
          prop="confirmPassword"
        >
          <el-input
            v-model="editEntity.confirmPassword"
            type="password"
            :maxlength="32"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="editEntity.isActive">{{ L('IsActive') }}</el-checkbox>
        </el-form-item>
      </el-form>
    </el-tab-pane>
    <el-tab-pane
      :label="L('UserRoles')"
      name="second"
    >
      <el-checkbox-group v-model="editEntity.roleNames">
        <el-checkbox
          v-for="role in roles"
          :key="role.id"
          :label="role.normalizedName"
        ><span>{{ role.name }}</span></el-checkbox>
      </el-checkbox-group>
    </el-tab-pane>
    <el-tab-pane
      :label="L('OrganizationUnits')"
      name="thrid"
    >
      <el-tree
        ref="organization"
        render-after-expand
        :data="organizationUnits"
        show-checkbox
        node-key="id"
        default-expand-all
        :props="organizationProps"
        @check-change="handleCheckChange"
      />
    </el-tab-pane>
  </el-tabs>
</template>
<script>
export default {
  props: {
    entity: {
      type: Object,
      default: () => { return {} }
    },
    dialogAction: {
      type: String,
      default: 'create'
    }
  },
  data() {
    const validatePassCheck = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.L('EnterPasswordAganin')))
      } else if (value !== this.editEntity.password) {
        callback(new Error(this.L('TwoPasswordNotMatch')))
      } else {
        callback()
      }
    }

    return {
      size: 'small',
      activeTag: 'first',
      editEntity: {},
      userRule: {
        userName: [
          { required: true, message: this.L('FieldIsRequired', undefined, this.L('UserName')), trigger: 'blur' }
        ],
        name: [
          { required: true, message: this.L('FieldIsRequired', undefined, this.L('Name')), trigger: 'blur' }
        ],
        surname: [
          { required: true, message: this.L('FieldIsRequired', undefined, this.L('Surname')), trigger: 'blur' }
        ],
        emailAddress: [
          { required: true, message: this.L('FieldIsRequired', undefined, this.L('Email')), trigger: 'blur' },
          { type: 'email', message: this.L('InvalidEmailAddress') }
        ]
      },
      newUserRule: {
        userName: [
          { required: true, message: this.L('FieldIsRequired', undefined, this.L('UserName')), trigger: 'blur' }
        ],
        name: [
          { required: true, message: this.L('FieldIsRequired', undefined, this.L('Name')), trigger: 'blur' }
        ],
        surname: [
          { required: true, message: this.L('FieldIsRequired', undefined, this.L('Surname')), trigger: 'blur' }
        ],
        emailAddress: [
          { required: true, message: this.L('FieldIsRequired', undefined, this.L('Email')), trigger: 'blur' },
          { type: 'email', message: this.L('InvalidEmailAddress') }
        ],
        password: [
          { required: true, message: this.L('FieldIsRequired', undefined, this.L('Password')), trigger: 'blur' }
        ],
        confirmPassword: { validator: validatePassCheck, trigger: 'blur' }
      },
      organizationProps: {
        children: 'children',
        label: 'displayName'
      }
    }
  },
  computed: {
    fromRoles() {
      return this.dialogAction === 'edit' ? this.userRule : this.newUserRule
    },
    roles() {
      // 打开user界面已经初始化过了
      return this.$store.state.user.roles
    },
    organizationUnits() {
      return this.$store.state.user.organizationUnits
    },
    avatar() {
      if (this.editEntity.profilePictureId && this.editEntity.profilePictureId !== '') {
        return this.$store.state.user.avatar
      }
      return this.$store.state.user.defaultAvatar
    }
  },
  watch: {
    entity(val) {
      this.editEntity = val
      this.loadProfilePicture()
      this.$refs.organization.setCheckedKeys(this.editEntity.memberedOrganizationUnits)
    },
    dialogAction(val) {
      if (val === 'create') {
        this.roles.map(r => {
          if (r.isDefault) { this.editEntity.roleNames.push(r.normalizedName) }
        })
      }
    }
  },
  mounted() {
    this.editEntity = this.entity
    this.loadProfilePicture()
    this.$refs.organization.setCheckedKeys(this.editEntity.memberedOrganizationUnits)
    if (this.dialogAction === 'create') {
      this.roles.map(r => {
        if (r.isDefault) { this.editEntity.roleNames.push(r.normalizedName) }
      })
    }
  },
  methods: {
    loadProfilePicture() {
      if (this.editEntity.profilePictureId && this.editEntity.profilePictureId !== '') {
        this.$store.dispatch('profile/getProfilePictureById', this.editEntity.profilePictureId)
      }
    },
    handleCheckChange() {
      this.editEntity.memberedOrganizationUnits = this.$refs.organization.getCheckedKeys()
    },
    clearValidate() {
      this.$refs.editForm.clearValidate()
    },
    validate(cb) {
      this.$refs.editForm.validate(cb)
    }
  }
}
</script>
